<template>
  <el-row class="department" :gutter="20">
    <el-col :span="8">
      <div class="qz department-content">
        <div class="head-search" style="justify-content: flex-start">
          <search @onSubmit="qzOnSearch">
            <el-form-item style="margin-top: -4px">
              <el-input placeholder="请输入全宗名"
                        v-model="qzSearch"
                        clearable
                        size="small" >
              </el-input>
            </el-form-item>
          </search>
        </div>

        <avue-crud :option="qzOption"
                   :table-loading="qzLoading"
                   :data="qzTableData"
                   :page.sync="qzPage"
                   ref="crud"
                   @on-load="onLoadQz"
                   @row-click="handleRowClick">
          <template slot="fondsNo" slot-scope="{row}">
            <div>
              {{row.fondsNo.split(' ')[0]}}
            </div>
          </template>
        </avue-crud>

      </div>
    </el-col>
    <el-col :span="16">
      <div class="qz department-content">
        <div class="head-search" style="padding-right: 15px">
          <search @onSubmit="onSearch">
            <el-form-item>
              <el-input placeholder="请输入内容" clearable v-model="searchData.val" size="small" class="input-with-select">
                <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
                  <el-option label="部门名称" value="orgName"></el-option>
                  <el-option label="部门代码" value="orgCode"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </search>
          <el-button class="reset" size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </div>
        <div class="fun-btn" style="margin-left: 15px">
          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAddEdit('add')">新增
          </el-button>
          <el-button type="danger" plain size="small" icon="el-icon-delete" @click="handleDel('batch')">删除</el-button>
        </div>

        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="tableData"
                   :page.sync="page"
                   ref="crud"
                   @on-load="onLoad"
                   @selection-change="selectionChange"
                   @row-save="handleRowSave"
                   @row-update="handleRowUpdate">
          <template slot="isEnable" slot-scope="{row}">
            <el-switch v-model="row.isEnable" @change="handleRowSwitch(row)"></el-switch>
          </template>
          <template slot="fondsNo" slot-scope="{row}">
            <div>
              {{row.fondsNo.split(' ')[0]}}
            </div>
          </template>
        </avue-crud>

      </div>
    </el-col>
  </el-row>

</template>

<script>
import Search from '../../../../components/search/search'
import {
  addDepartmentList,
  delDepartmentList,
  editDepartmentList,
  getDepartmentList
} from '../../../../api/department/department'
import { getQzDic } from '../../../../api/quanzong/quanzong'

export default {
  name: 'Department', // 部门设置
  components: {
    Search
  },
  data () {
    return {
      treeData: [], // 左边全宗数据
      cascaderOptions: [],
      searchData: {
        val: '',
        select: 'orgName'
      },
      pid: '0', // 上级部门id
      tableSelected: [],
      loading: false,
      qzLoading: false,
      qzTableData: [],
      qzSearch: '',
      qzPage: {
        currentPage: 1,
        total: 0,
        layout: 'total, pager, prev, next',
        background: false,
        pageSizes: [20, 40, 60, 80],
        pageSize: 20
      },
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      params: [],
      leftRowData: {},
      qzDataSelect: [] // 全宗下拉框
    }
  },
  computed: {
    option () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 260px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 200,
        column: [
          {
            label: '全宗号',
            prop: 'fondsNo',
            type: 'select',
            width: 180,
            overHidden: true,
            value: this.leftRowData.fondsNo,
            disabled: this.leftRowData.fondsNo,
            dicData: this.qzDataSelect,
            props: {
              label: 'fondsName',
              value: 'fondsNo'
            },
            slot: true,
            rules: [
              {
                required: true,
                message: '请选择全宗号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '部门名称',
            prop: 'orgName',
            width: 150,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入部门名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '部门代码',
            prop: 'orgCode',
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入部门代码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '排序',
            prop: 'orderNo',
            type: 'input-number',
            rules: [
              {
                required: true,
                message: '请输入排序号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '可用',
            prop: 'isEnable',
            type: 'switch',
            slot: true,
            width: 80,
            value: true,
            dicData: [{ value: false }, { value: true }],
            rules: [{
              required: true,
              message: '请选择是否可用',
              trigger: 'blur'
            }]
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            width: 180,
            overHidden: true,
            span: 24,
            maxlength: 200,
            showWordLimit: true
          }
        ]
      }
    },
    qzOption () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 210px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: false, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 200,
        menu: false,
        column: [
          {
            label: '全宗号',
            prop: 'fondsNo',
            type: 'select',
            width: 120,
            overHidden: true,
            slot: true
          },
          {
            label: '全宗名',
            prop: 'fondsName',
            minWidth: 120,
            overHidden: true
          }
        ]
      }
    }
  },
  mounted () {
    this.getQuanzong()
  },
  methods: {
    qzOnSearch () {
      this.qzPage.currentPage = 1
      this.qzPage.pageSize = 20

      this.onLoadQz()
    },
    onLoadQz () {
      this.qzLoading = true
      const param = {
        pageNo: this.qzPage.currentPage,
        pageSize: this.qzPage.pageSize
      }
      if (this.qzSearch) {
        param.params = [{
          name: 'fondsName',
          op: 'like',
          value: this.qzSearch
        }]
      }
      getQzDic(param).then(res => {
        this.qzTableData = res.data.data.list
        this.qzPage.total = res.data.data.total
        this.qzLoading = false
      }).catch(() => {
        this.qzLoading = false
      })
    },
    getQuanzong () {
      getQzDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        res.data.data.list.map(item => {
          item.fondsName = item.fondsNo + ' ' + item.fondsName
        })
        this.qzDataSelect = res.data.data.list
      })
    },
    handleRowClick (row) {
      // 点击左边列表加载右边数据
      this.leftRowData = row
      this.onSearch()
    },
    onLoad () {
      // 加载列表
      this.loading = true
      const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage
      }
      if (this.params.length > 0) {
        query.params = this.params
      }
      getDepartmentList(query).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.loading = false
      })
    },
    handleChangePid (val) {
      this.pid = val[val.length - 1]
    },
    handleReset () {
      // 重置
      this.searchData.val = ''
      this.pid = ''
      this.$refs.cascader.handleClear()
    },
    onSearch () {
      // 搜索
      this.page.currentPage = 1
      this.page.pageSize = 20
      this.params = []
      /* if (this.pid) {
        this.params.push({
          op: 'eq',
          name: 'pid',
          value: this.pid
        })
      } */
      if (this.searchData.val) {
        this.params.push({
          op: 'like',
          name: this.searchData.select,
          value: this.searchData.val
        })
      }
      if (this.leftRowData) {
        this.params.push({
          name: 'fondsNo',
          op: 'eq',
          value: this.leftRowData.fondsNo
        })
      }
      this.onLoad()
    },
    handleAddEdit () {
      // 打开新增窗口
      const column = this.findObject(this.option.column, 'orderNo')
      column.value = this.page.total + 1
      this.$refs.crud.rowAdd()
    },
    handleRowSave (row, done, loading) {
      // 保存新增表格
      row.pid = this.pid
      row.orgType = '2'
      addDepartmentList(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    handleRowSwitch (row) {
      editDepartmentList(row).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleRowUpdate (row, index, done, loading) {
      // 编辑修改表格
      editDepartmentList(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    selectionChange (val) {
      // 选择表格
      this.tableSelected = val
    },
    handleDel () {
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少勾选一条需要删除的菜单信息！')
      } else {
        this.$confirm('此操作将永久删除选中的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map((item) => {
            ids.push(item.id)
          })
          delDepartmentList(ids).then(res => {
            this.loading = true
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.onLoad()
          })
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .department {
    .department-content {
      height: calc(100vh - 85px);
      background: #fff;
      border-radius: 5px;
      padding: 15px 0 0 ;
    }
  }

  .head-search {
    margin-left: 10px;
    .bumen {
      position: relative;
      top: -4px;
    }

    .input-with-select {
      width: auto;
    }
    ::v-deep .el-select .el-input {
      width: 110px;
    }

    ::v-deep input {
      height: 32px !important;
    }
  }

  ::v-deep .avue-crud {
    padding-bottom: 15px;
    background: #fff;
  }
</style>
